<template>
	<view class="topic-container">
		<!-- <view class="near-topic">
			<fun-topic-item @clickTopicItem="clickTopicItem"></fun-topic-item>
		</view> -->
		<fun-topic-scroll 
		ref="topicScroll"
		:contentViewList="contentViewList" 
		:classifyIdIndex="classifyIdIndex"
		@scrolltolower="scrolltolower"
		@onRefresh="onRefresh"
		@changeCurrent="changeCurrent"></fun-topic-scroll>
	</view>
</template>

<script>
	import funTopicItem from '@/components/funTopicItem/funTopicItem.vue';
	import funTopicScroll from '@/components/funTopicScroll/funTopicScroll.vue';
	import {Topic} from '@/model/topic.js';
	export default {
		data() {
			return {
				contentViewList:[],
				classifyIdIndex:0,
				topicShear:[]
			};
		},
		components:{
			funTopicItem,
			funTopicScroll
		},
		created() {
			uni.setNavigationBarTitle({
				title:"话题"
			})
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', async e=> {
				await this.getTopicList(e)
				uni.showLoading({
					title:"加载中"
				})
				let res = await Topic.findTopicList({page:1,topicClassifyId:e.classifyId})
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.classifyIdIndex = this.contentViewList.findIndex(item=> item.id == e.classifyId)
				this.contentViewList[this.classifyIdIndex].topicShareList = res.data
				
			})
		},
		methods:{
			clickTopicItem(id){
				uni.navigateTo({
					url:"../topicDetail/topicDetail",
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {id:id})
					}
				})
			},
			async getTopicList(e){
				uni.showLoading({
					title:"加载中"
				})
				let res = await Topic.getTopicList()
				this.contentViewList = res .data
				this.classifyIdIndex = this.contentViewList.findIndex(item=> item.id == e.classifyId)
				this.topicShear.push(new Topic(1,this.contentViewList[0].id,true))
			},
			async changeCurrent(e){
				if(!this.contentViewList[e].topicShareList){
					this.topicShear.push(new Topic(1,this.contentViewList[e].id,true))
					uni.showLoading({
						title:"加载中"
					})
					let res = await Topic.findTopicList({page:1,topicClassifyId:this.contentViewList[e].id})
					uni.hideLoading()
					if(res.code != 200){
						uni.showToast({
							icon:'none',
						    title: res.message,
						    duration: 2000
						});
						return
					}
					this.contentViewList[e].topicShareList = res.data
				}
			},
			async onRefresh(index){
				let funIndex = this.topicShear.findIndex(item=>
					item.topicClassifyId == this.contentViewList[index].id
				)
				let res = await Topic.findTopicList({topicClassifyId:this.topicShear[funIndex].topicClassifyId})
				if(!res.code == 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.topicShear[funIndex].page = 1;
				this.topicShear[funIndex].canRefresh = true
				this.contentViewList[index].topicShareList = res.data
				this.$refs.topicScroll.hideRefresh()
			},
			async scrolltolower(index){
				uni.showLoading({
					mask:true,
					title:"加载中..."
				})
				let funIndex = this.topicShear.findIndex(item=>
					item.topicClassifyId == this.contentViewList[index].id
				)
				if(!this.topicShear[funIndex].canRefresh) return;
				this.topicShear[funIndex].page += 1;
				let res = await Topic.findTopicList(this.topicShear[funIndex])
				uni.hideLoading()
				if(res.code != 200){
					uni.showToast({
						icon:'none',
					    title: res.message,
					    duration: 2000
					});
					return
				}
				this.contentViewList[index].topicShareList.data.push(...res.data.data)
				if(res.data.pages == this.topicShear[funIndex]){
					this.topicShear[funIndex].canRefresh = false
					this.$refs.topicScroll.doenTolower()
				}
				this.$refs.topicScroll.tolowerNoData()
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>
